<template>
  <div class="box" style="position: relative;  background-color: #f2f2f2;padding-bottom: 210px;">
    <heads></heads>
    <tools></tools>
    <div class="tit1">
      <div class="list">
        <div class="li" style="cursor: pointer" @click="() => {
          $router.push('/');
        }
          ">
          <img src="../../assets/logo.png" />
        </div>
        <div :style="cuts == 2 ? 'color:#64B6A8;' : ''" @click="cutClick(2)">
          全职招聘
        </div>
        <div :style="cuts == 1 ? 'color:#64B6A8;' : ''" @click="cutClick(1)">
          兼职招聘
        </div>
        <div :style="cuts == 0 ? 'color:#64B6A8;' : ''" @click="cutClick(0)">
          人才简历
        </div>
        <div>
          <div class="sousuo">
            <input type="text" v-model="searchtext" placeholder="请输入关键字查找" @keyup.enter="search" />
            <p class="el-icon-search" @click="search"></p>
          </div>

          <downloadAppBtn setTop="156" setRight="188"></downloadAppBtn>
        </div>
      </div>
    </div>

    <!-- <div class="titLiat">
      <div @click="cutClick(2)" :class="cuts == 2 ? 'li cur' : 'li'">
        <p>全职招聘</p>
        <img v-if="2 == cuts" src="../../assets/xuanzhong.png" />
      </div>
      <div @click="cutClick(1)" :class="cuts == 1 ? 'li cur' : 'li'">
        <p>兼职招聘</p>
        <img v-if="1 == cuts" src="../../assets/xuanzhong.png" />
      </div>
      <div @click="cutClick(0)" :class="cuts == 0 ? 'li cur' : 'li'">
        <p>人才简历</p>
        <img v-if="0 == cuts" src="../../assets/xuanzhong.png" />
      </div>
    </div> -->
    <div class="saixuan">
      <bbzcFilter1 ref="bbzcFilter1" :type="cuts == 0 ? 'resume' : 'resume'" :show="saixuanstate" @getQueryData="getQueryData"
        v-show="cuts == 0"></bbzcFilter1>
      <bbzcFilter2 ref="bbzcFilter2" :type="cuts == 2 ? 'full' : cuts == 1 ? 'part' : '?'" @getQueryData="getQueryData" :show="saixuanstate"
        isMap v-show="cuts != 0"></bbzcFilter2>
      <div class="li">
        <p class="p1" v-if="saixuanstate" style="
            width: 620px;
            text-align: right;
            color: #333333;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
          " @click="saixuanstate = false">
          ︿ 收起
        </p>
        <p class="p1" v-else style="
            width: 700px;
            text-align: right;
            color: #333333;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
          " @click="saixuanstate = true">
          ﹀
          {{
            cuts == 2
            ? "全职招聘筛选"
            : cuts == 1
              ? "兼职招聘筛选"
              : "人才简历筛选"
          }}
        </p>
      </div>

      <!-- :style="[{ paddingLeft: pmwidth + 'px' }]" -->
      <div class="housewrap">
        <div v-if="housestate" class="houseup" v-loading="loading" element-loading-text="拼命加载中"
          element-loading-background="rgba(255, 255, 255, 0.8)">
          <!-- 标题 -->
          <div style="
              display: flex;
              cursor: pointer;
              color: #333333;
              font-size: 18px;
              font-weight: 600;
              justify-content: space-between;
              align-items: center;
              padding: 19px 22px;

            " @click="housestate = false">
            <div style="display: flex; align-items: center">
              <p class="el-icon-arrow-up" style="font-size: 28px"></p>
              <div style="display: flex; margin-left: 12px">
                该区域内共有
                <p style="color: red">{{ housetotal }}</p>
                {{ houseTxt }}
              </div>
            </div>
            <div style="" @click.stop>
              <el-dropdown @command="handleCommand" trigger="click">
                <span class="el-dropdown-link">
                  排序<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="i.id" :class="sortIndex == i.id ? 'sortActive' : ''"
                    v-for="(i, j) in sortArr" :key="j">{{ i.value }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <!-- 内容 -->
          <template v-if="cuts == 2">
            <virtual-list style="height: 560px; overflow-y: auto" :data-key="'id'" :data-sources="houseList"
              :data-component="bbzcItem">
            </virtual-list>
          </template>
          <template v-if="cuts == 1">
            <virtual-list style="height: 560px; overflow-y: auto" :data-key="'id'" :data-sources="houseList"
              :data-component="bbzcItem">
            </virtual-list>
          </template>
          <template v-if="cuts == 0">
            <virtual-list style="height: 560px; overflow-y: auto" :data-key="'id'" :data-sources="houseList"
              :data-component="recommended">
            </virtual-list>
          </template>
          <el-empty v-if="housetotal == 0" :description="cuts == 2
            ? '该区域没有符合条件的职位'
            : cuts == 1
              ? '该区域没有符合条件的职位'
              : '该区域没有符合条件的人才简历'
            "></el-empty>
        </div>
        <!-- :style="[{ paddingLeft: pmwidth + 'px' }]" -->
        <div v-else class="housedown">
          <div style="
              display: flex;
              cursor: pointer;
              color: #333333;
              font-size: 18px;
              font-weight: 600;
              align-items: center;
              padding: 19px 22px;
			  justify-content: space-between;
            " @click="housestate = true">
            <div style="display: flex;align-items: center;">
              <p class="el-icon-arrow-down" style="font-size: 28px"></p>
              <div style="display: flex; margin-left: 12px">
                该区域内共有
                <p style="color: red">{{ housetotal }}</p>
                {{ houseTxt }}
              </div>
            </div>
            <div style="" @click.stop>
              <el-dropdown @command="handleCommand" trigger="click">
                <span class="el-dropdown-link">
                  排序<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="i.id" :class="sortIndex == i.id ? 'sortActive' : ''"
                    v-for="(i, j) in sortArr" :key="j">{{ i.value }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
        <div style="
              display: flex;
              cursor: pointer;
              color: #333333;
              font-size: 18px;
              font-weight: 600;

              align-items: center;
              padding: 19px 22px;
            " @click="housestate = false"></div>
      </div>
    </div>

    <div id="containepic" :style="!saixuanstate
      ? 'width: 100%;height: 800px;'
      : 'width: 100%;height: 600px;'
      ">
      <img src="../../assets/dw.png" @click="initMap()" style="
          width: 50px;
          height: 50px;
          position: absolute;
          right: 100px;
          z-index: 99999999;
          bottom: 20px;
          cursor: pointer;
        " />
    </div>
    <floor></floor>
  </div>
</template>

<script>
import floor from "@/components/floor";
import heads from "@/components/head";
import virtuallist from "vue-virtual-scroll-list";
// 优化页面数据渲染
import lookCar from "@/components/bbcz/lookCar.vue";
import lookShop from "@/components/bbcz/lookShop.vue";
import lookService from "@/components/bbcz/lookService.vue";
import bbzcFilter2 from "./comp/bbzcFilter2.vue";
import bbzcFilter1 from "./comp/bbzcFilter1.vue";
import bbzcItem from "@/components/bbzc/item.vue";
import recommended from "@/components/bbzc/recommended.vue";
import axios from "axios";
import tools from "@/components/tools";
export default {
  components: {
    floor,
    heads,
    lookCar,
    lookShop,
    lookService,
    "virtual-list": virtuallist,
    bbzcFilter1,
    bbzcFilter2,
    bbzcItem,
    tools,
    recommended
  },
  data() {
    return {
      param: {},
      recommended: "recommended",
      bbzcItem: "bbzcItem",
      recommended: recommended,
      bbzcItem: bbzcItem,

      brandloading: false,
      loading: false,
      gotop: false,
      housestate: false,
      saixuanstate: true,
      olds: 2,
      inputForm: {
        latitude: "",
        longitude: ""
      },
      markersArray: [],
      markersArrays: [],
      circleArray: [],
      type2: [],
      type11: [],
      type4: [],
      type8: [],
      type9: [],
      type10: [],
      type6: [],
      type5: [],
      type12: [],
      leibieIndex: -1,
      priceIndex: -1,
      loucIndex: -1,
      mianjiIndex: -1,
      housesIndex: -1,
      areaIndex: -1,
      HousesPage: {
        pageSize: 999,
        pageNo: 1
      },
      premisesPage: {
        pageNo: 1,
        pageSize: 999,
        auditStatus: 2,
        latitude: "",
        longitude: "",
        price: ""
      },
      agencyPage: {
        pageNo: 1,
        pageSize: 999,
        longitude: "",
        latitude: "",
        status: 1,
        shopType: 1,
        shopArea: ""
      },
      // 免费服务
      freeServiceType: [
        {
          id: 1,
          valueNum: 1,
          valueName: "是"
        },
        {
          id: 2,
          valueNum: 0,
          valueName: "否"
        }
      ],
      lng: "",
      lat: "",
      housetotal: 0,
      searchtext: "",
      houseList: [],
      distance: 3680,
      keyword: "",
      cuts: 2,
      houseTxt: "份全职招聘",
      itemLookCar: lookCar,
      itemLookShop: lookShop,
      itemLookService: lookService,
      pmwidth: 0,
      // 车辆品牌索引
      clppsy: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ],
      // 车辆品牌数据
      clppArry: [],
      clppChage: "xz",
      // 判断是否移入品牌选择div中
      ppaixze: false,
      // 选中品牌的数据
      ppaiData: "",
      // 车系数据
      clcxArry: [],
      ppaiIndex: -1,
      sortIndex: 1,
      sortArr: [
        {
          id: 1,
          value: "最新发布"
        },
        {
          id: 2,
          value: "按薪资从高到低"
        },
        {
          id: 3,
          value: "按距离从近到远"
        }
      ],
      typeIndex2: -1,
      // 三
      whetherFreeService: "", // 是否为免费项目
      entryName: "", //项目名称
      //   二
      serviceType: "", //店铺类型
      typeIndex11: -1, //店铺类型索引
      // 一
      newoldIndex: -1, //车辆新旧售卖类型（1：到店新车；2：二手车；3：在售车系）
      transmissionCaseArr: [
        {
          id: 1,
          valueNum: 1,
          valueName: "自动"
        },
        {
          id: 2,
          valueNum: 2,
          valueName: "手动"
        }
      ],
      transmissionCaseIndex: -1,
      typeIndex9: -1,
      typeIndex8: -1,
      typeIndex6: -1,
      typeIndex5: -1,
      typeIndex10: -1,
      typeIndex12: -1,
      minimumPrice: "",
      highestPrice: "",
      minPrice: "",
      maxPrice: "",
      newSource: false,
      arr: [],
      trangleLeft: 10,
      source: null,
      screenList: []
    };
  },
  watch: {},
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  created() {
    this.initMap();

    // 获取屏幕宽度
    this.pmwidths();
  },
  methods: {
    cancelRequest() {
      if (typeof this.source === "function") {
        this.source();
      }
    },

    getQueryData(param) {
      this.param = param;
      this.getHouseInfo(param);
    },
    ppaiClick(item, ref) {
      if (item != -1) {
        this.ppaiIndex = item;
        this.queryBrand(item);
        this.clppChage = "xz" + item;
        this.trangleLeft = this.$refs[ref][0].offsetLeft + 10;
        return;
      }
      this.ppaiIndex = item;
      this.brandloading = false;
      this.trangleLeft = 10;
      this.arr = [];
      this.dealObjFnc(1, 1, "delAll");

      this.HousesPage.vehicleBrandModel = "";
      this.clppChage = "xz";
      this.clppArry = [];
      this.ppaiData = "";
      if (ref) {
        return;
      } else {
        this.getHouseInfo();
      }
    },
    ppaiyichu() {
      let stim = setTimeout(() => {
        if (this.ppaixze) {
          clearTimeout(stim);
          return;
        }
        this.clppChage = "xz";
      }, 100);
    },
    xzppaiClick(item, flag, from) {
      if (!from) {
        //下面筛选删除专用
        this.ppaiData = item;
      }

      var tempArr = [];
      if (this.brandIdToVehicleSeriesId[item.id] && flag) {
        tempArr = this.dealObjFnc(item.id, item, "del1");
        this.priceIndex = tempArr;
      } else {
        //未被选中的
        tempArr = this.dealObjFnc(item.id, item, "set");
        this.priceIndex = tempArr;
      }
      if (
        !tempArr.includes(this.ppaiData.brandName) &&
        item.brandName == this.ppaiData.brandName
      ) {
        // console.log("tempArrtempArrtempArr", this.ppaiData);
        this.ppaiData = "";
        this.clcxArry = [];
      }
      if (!from) {
        //下面筛选删除专用
        this.queryRange(item.id);
      }
      this.HousesPage.vehicleBrandModel = tempArr.join(",");
      // this.queryRange(item.id);
      this.getHouseInfo();
    },
    // 查询车辆品牌
    queryBrand(index) {
      this.$getHttp("/api/mobile/vehicleOwner/queryVehicleBrandList", {
        initial: index
      }).then(res => {
        this.clppArry = res.vehicleBrandMapList[index];
        this.brandloading = true;
      });
    },
    // 查询车系
    queryRange(id) {
      this.$getHttp(
        "/api/mobile/vehicleOwner/queryVehicleSeriesListByBrandId",
        {
          brandId: id
        }
      ).then(res => {
        this.clcxArry = res.vehicleSeriesList;
      });
    },
    pmwidths() {
      let width = 0;
      width = (document.documentElement.clientWidth + 1 - 1200) / 2;
      this.pmwidth = width;
    },
    cutClick(cut) {
      if (this.cuts == cut) return;
      // if (cut == 2) {
      //   this.ppaiClick(-1, true);
      // }
      // delete this.HousesPage.vehicleBrandModel;
      this.sortIndex = 1;
      if (cut == 2) {
        this.screenList = this.tempScreenList;
      } else {
        this.screenList = [];
      }

      // this
      switch (cut) {
        //中介
        case 0:
          this.cuts = cut;
          this.agencyPage.pageNo = 1;
          this.houseTxt = "份人才简历";
          break;
        //在售楼盘
        case 1:
          this.cuts = cut;
          this.premisesPage.pageNo = 1;
          this.houseTxt = "份兼职招聘";
          break;
        //房源
        case 2:
          this.cuts = cut;
          this.HousesPage.pageNo = 1;
          this.houseTxt = "份全职招聘";

          break;
      }
      if (this.$refs.bbzcFilter1) {
        this.$refs.bbzcFilter1.goClickn(-1,1);
        this.$refs.bbzcFilter2.goClickn(-1,1);
      }
      if (this.$refs.bbzcFilter2) {
        this.$refs.bbzcFilter2.mianjiClickn(-1);
      }
      // this.HousesPage.keyword=''
      this.searchtext = "";
      this.getHouseInfo();
    },
    initMap() {
      let data = {
        key: "ZYIBZ-6VVRW-NCURN-O6GZO-2VRAH-KIBJV",
        output: "jsonp"
      };
      this.$jsonp("https://apis.map.qq.com/ws/location/v1/ip", data).then(
        data => {
          let lat = data.result.location.lat;
          let lng = data.result.location.lng;
          // 经度
          this.lng = data.result.location.lng;
          // 维度
          this.lat = data.result.location.lat;
          var that = this;
          var center = new qq.maps.LatLng(
            data.result.location.lat,
            data.result.location.lng
          );
          var map = new qq.maps.Map(document.getElementById("containepic"), {
            center: center,
            zoom: 13,
            disableDefaultUI: true,
            anchor
          });
          this.map = map;
          lat = map.getCenter().lat;
          lng = map.getCenter().lng;
          var anchor = new qq.maps.Point(250, 250),
            size = new qq.maps.Size(500, 500),
            scaleSize = new qq.maps.Size(500, 500),
            origin = new qq.maps.Point(0, 0),
            icon = new qq.maps.MarkerImage(
              "https://pic.bangbangtongcheng.com/61d928e58d47472891609adfc954148f.png",
              size,
              origin,
              anchor,
              scaleSize
            );
          var marker = new qq.maps.Marker({
            icon: icon,
            position: center,
            map: map
          });
          that.markersArray.push(marker);
          this.getHouseInfo();

          qq.maps.event.addListener(map, "dragend", function () {
            that.houseList = [];
            that.deleteOverlays();
            lat = map.getCenter().lat;
            lng = map.getCenter().lng;
            that.lat = lat;
            that.lng = lng;
            let center = new qq.maps.LatLng(lat, lng);
            marker = new qq.maps.Marker({
              icon: icon,
              position: center,
              map: map
            });
            that.markersArray.push(marker);
            that.getHouseInfo();
          });
          qq.maps.event.addListener(map, "zoom_changed", function () {
            that.houseList = [];
            that.deleteOverlays();
            let center = new qq.maps.LatLng(that.lat, that.lng);
            marker = new qq.maps.Marker({
              icon: icon,
              position: center,
              map: map
            });
            // console.log(marker);
            that.markersArray.push(marker);
            var zoomLevel = map.getZoom();
            that.calculateDis(zoomLevel);
            console.log(zoomLevel);
            setTimeout(() => {
              that.getHouseInfo(that.param);
            }, 100);
          });
        }
      );
    },
    calculateDis(num) {
      //根据地图比例计算收缩范围
      if (num == 3) {
        this.distance = 3680 * 1000;
      }
      if (num == 4) {
        this.distance = 3680 * 500;
      }
      if (num == 5) {
        this.distance = 3680 * 250;
      }
      if (num == 6) {
        this.distance = 3680 * 100;
      }
      if (num == 7) {
        this.distance = 3680 * 50;
      }
      if (num == 8) {
        this.distance = 3680 * 25;
      }
      if (num == 9) {
        this.distance = 3680 * 10;
      }
      if (num == 10) {
        this.distance = 3680 * 5;
      }
      if (num == 11) {
        this.distance = 3680 * 2.5;
      }
      if (num == 12) {
        this.distance = 3680 * 1.8;
      }
      if (num == 13) {
        this.distance = 3680 * 1;
      }
      if (num == 14) {
        this.distance = 3680 * 0.5;
      }
      if (num == 15) {
        this.distance = 3680 * 0.25;
      }
      if (num == 16) {
        this.distance = 3680 * 0.1;
      }
      if (num == 17) {
        this.distance = 3680 * 0.05;
      }
      if (num == 18) {
        this.distance = 3680 * 0.025;
      }
      if (num == 19) {
        this.distance = 3680 * 0.001;
      }
      if (num == 20) {
        this.distance = 3680 * 0.0005;
      }
    },
    deleteOverlays() {
      if (this.markersArray) {
        for (var i in this.markersArray) {
          console.log(this.markersArray[i]);
          this.markersArray[i].setMap(null);
        }
        // this.markersArray.length = 0;
        this.markersArray = [];
      }
      if (this.markersArrays) {
        console.log(this.markersArrays.length, "清除数据的长度");
        for (var i in this.markersArrays) {
          console.log(this.markersArrays[i].position.lat, "清除的经纬度");
          this.markersArrays[i].setMap(null);
        }
        // this.markersArrays.length = 0;
        this.markersArrays = [];
      }
    },

    confirmPrice() {
      console.log(this.minimumPrice);
      console.log(this.highestPrice);

      if (this.minimumPrice != "") {
        this.HousesPage.minimumPrice = this.minimumPrice;
      } else {
        delete this.HousesPage.minimumPrice;
      }
      if (this.highestPrice != "") {
        this.HousesPage.highestPrice = this.highestPrice;
      } else {
        delete this.HousesPage.highestPrice;
      }
      if (!this.minimumPrice && !this.highestPrice) {
        this.$message({
          message: "请输入最低价或最高价",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return;
      }
      if (this.minimumPrice.trim() != "" && this.highestPrice.trim() != "") {
        if (+this.minimumPrice.trim() > +this.highestPrice.trim()) {
          this.$message({
            message: "最低价不能大于最高价",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
      }
      // this.typeIndex8=-1
      this.typeIndex8 = -9;
      delete this.HousesPage.price;
      this.getHouseInfo();
    },
    typeClick12(i) {
      this.HousesPage.pageNo = 1;
      if (i != -1) {
        this.typeIndex12 = i.valueNum;
      } else {
        this.typeIndex12 = -1;
      }
      this.getHouseInfo();
    },
    // 排放标准
    typeClick6(i) {
      this.HousesPage.pageNo = 1;
      if (i != -1) {
        this.typeIndex6 = i.valueNum;
      } else {
        this.typeIndex6 = -1;
      }
      this.getHouseInfo();
    },
    // 排量（L）
    typeClick10(i) {
      this.HousesPage.pageNo = 1;
      if (i != -1) {
        this.typeIndex10 = i.valueNum;
      } else {
        this.typeIndex10 = -1;
      }
      this.getHouseInfo();
    },
    // 燃料类型
    typeClick5(i) {
      this.HousesPage.pageNo = 1;
      if (i != -1) {
        this.typeIndex5 = i.valueNum;
      } else {
        this.typeIndex5 = -1;
      }
      if (i.valueName == "新能源") {
        this.typeIndex10 = -1;
        this.typeIndex6 = -1;
        this.newSource = true;
      } else {
        this.newSource = false;
      }
      console.log(i);
      this.getHouseInfo();
    },
    // 变速箱
    transmissionCaseClick(i) {
      this.HousesPage.pageNo = 1;
      if (i != -1) {
        this.transmissionCaseIndex = i.valueNum;
      } else {
        this.transmissionCaseIndex = -1;
      }
      this.getHouseInfo();
    },
    // 价格
    typeClick8(i) {
      this.HousesPage.pageNo = 1;
      if (i != -1) {
        this.typeIndex8 = i.valueNum;
        this.HousesPage.price = i.valueName;
      } else {
        this.typeIndex8 = -1;
        this.HousesPage.price = "";
      }
      this.minimumPrice = "";
      this.highestPrice = "";
      delete this.HousesPage.minimumPrice;
      delete this.HousesPage.highestPrice;
      this.getHouseInfo();
    },
    // 车龄
    typeClick9(i) {
      this.HousesPage.pageNo = 1;
      if (i != -1) {
        this.typeIndex9 = i.valueNum;
        this.HousesPage.vehicleAge = i.valueName;
      } else {
        this.typeIndex9 = -1;
        this.HousesPage.vehicleAge = "";
      }
      // console.log('111111111111111111111111111',i);
      // console.log('222222222222222222222222222',i.valueName);
      // console.log('333333333333333333333333333',this.HousesPage.vehicleAge);
      this.getHouseInfo();
    },
    newoldClick(i) {
      this.HousesPage.pageNo = 1;

      this.newoldIndex = i;
      this.getHouseInfo();
    },
    handleCommand(command) {
      this.HousesPage.pageNo = 1;
      this.sortIndex = command;
      this.getHouseInfo();
    },
    getArrLabel(arr, id) {
      arr = arr.filter(item => item.valueNum == id);
      return arr.length > 0 ? arr[0].valueName : "";
    },
    getHouseInfo(param = {}) {
      this.loading = true;
      this.HousesPage.distance = this.distance / 1000;
      this.HousesPage.latitude = this.lat;
      this.HousesPage.longitude = this.lng;
      // this.premisesPage.distance = this.distance
      // this.premisesPage.latitude = this.lat
      // this.premisesPage.longitude = this.lng
      // this.agencyPage.distance = this.distance
      // this.agencyPage.latitude = this.lat
      // this.agencyPage.longitude = this.lng
      // if (this.markersArrays) {
      //   console.log(this.markersArrays.length, "清除数据的长度");
      //   for (var i in this.markersArrays) {
      //     console.log(this.markersArrays[i].position.lat, "清除的经纬度");
      //     this.markersArrays[i].setMap(null);
      //   }
      //   // this.markersArrays.length = 0;
      //   this.markersArrays=[]
      // }

      let url;
      let obj = {};
      if (this.cuts == 2) {
        url = "/api/mobile/personnelOwner/lookupFullTimeRecruitment";

        obj = {
          ...this.HousesPage,
          ...param,
          searchKeyword: this.searchtext || "",
          sort: this.sortIndex < 0 ? 1 : this.sortIndex
        };
      } else if (this.cuts == 1) {
        url = "/api/mobile/personnelOwner/lookupPartTimeRecruitment";
        obj = {
          ...this.HousesPage,
          ...param,

          searchKeyword: this.searchtext || "",

          sort: this.sortIndex < 0 ? 1 : this.sortIndex
        };
      } else if (this.cuts == 0) {
        url = "/api/mobile/personnelOwner/lookupTalentResume";
        obj = {
          ...this.HousesPage,
          ...param,
          searchKeyword: this.searchtext || "",
          sort: this.sortIndex < 0 ? 1 : this.sortIndex
        };
      }
      // console.log('urlurlurlurl',url);
      //       return
      this.cancelRequest();
      // 取消上一次请求
      // return;
      axios({
        method: "get",
        url: this.$baseURL + url,
        params: obj,
        cancelToken: new axios.CancelToken(c => {
          this.source = c;
        })
      }).then(data => {
        data = data.data;
        if (data.code == 200) {
          if (this.markersArrays) {
            console.log(this.markersArrays.length, "清除数据的长度");
            for (var i in this.markersArrays) {
              console.log(this.markersArrays[i].position.lat, "清除的经纬度");
              this.markersArrays[i].setMap(null);
            }
            // this.markersArrays.length = 0;
            this.markersArrays = [];
          }
          setTimeout(() => {
            this.loading = false;
          }, 100);
          this.houseList = data.fullTimeRecruitment
            ? data.fullTimeRecruitment.pageList
            : data.partTimeRecruitment
              ? data.partTimeRecruitment.pageList
              : data.talentResume.pageList;
          this.housetotal = data.fullTimeRecruitment
            ? data.fullTimeRecruitment.pageCount
            : data.partTimeRecruitment
              ? data.partTimeRecruitment.pageCount
              : data.talentResume.pageCount;

          this.markersArrays = [];
          let houseNumber = this.houseList.length;
          let toHouse = Number(String(houseNumber).substring(0, 1)) + 1;
          this.houseList.forEach((e, i) => {
            if (this.houseList.length > 100) {
              if (i % toHouse == 0) {
                var center = new qq.maps.LatLng(e.latitude, e.longitude);
                var anchor = new qq.maps.Point(15, 15),
                  size = new qq.maps.Size(30, 30),
                  scaleSize = new qq.maps.Size(30, 30),
                  origin = new qq.maps.Point(0, 0),
                  icon = new qq.maps.MarkerImage(
                    "https://pic.bangbangtongcheng.com/locationpic.png",
                    size,
                    origin,
                    anchor,
                    scaleSize
                  );
                var marker = new qq.maps.Marker({
                  icon: icon,
                  position: center,
                  map: this.map
                });
                this.markersArrays.push(marker);
              }
            } else {
              var center = new qq.maps.LatLng(e.latitude, e.longitude);
              var anchor = new qq.maps.Point(15, 15),
                size = new qq.maps.Size(30, 30),
                scaleSize = new qq.maps.Size(30, 30),
                origin = new qq.maps.Point(0, 0),
                icon = new qq.maps.MarkerImage(
                  "https://pic.bangbangtongcheng.com/locationpic.png",
                  size,
                  origin,
                  anchor,
                  scaleSize
                );
              var marker = new qq.maps.Marker({
                icon: icon,
                position: center,
                map: this.map
              });
              this.markersArrays.push(marker);
            }
          });
        }
      });
    },
    handleScroll() {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层/共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋/共" + fool[1] + "层";
    },
    search() {
      // if (this.cuts==2) {
      // 	this.HousesPage.keyword = this.searchtext
      // }else if (this.cuts==1) {
      // 	this.premisesPage.keyword = this.searchtext
      // }else if (this.cuts==0) {
      // 	this.agencyPage.keyword = this.searchtext
      // }
      this.getHouseInfo();
    },
    housedetails(item) {
      if (this.cuts == 2) {
        if (item.transactionType == 1) {
          const routeLink = this.$router.resolve({
            path: "/index/leaseDetails?id=" + item.id
          });
          window.open(routeLink.href, "_blank");
        } else {
          const routeLink = this.$router.resolve({
            path: "/index/newHouseDetails?id=" + item.id
          });
          window.open(routeLink.href, "_blank");
        }
      } else if (this.cuts == 1) {
        const routeLink = this.$router.resolve({
          path: "/index/storeyDetails?id=" + item.id
        });
        window.open(routeLink.href, "_blank");
      } else if (this.cuts == 0) {
        const routeLink = this.$router.resolve({
          path: "/index/ShopDetails?id=" + item.id
        });
        window.open(routeLink.href, "_blank");
      }
    },
    toAgent(id) {
      const routeLink = this.$router.resolve({
        path: "/index/goldConsultant?id=" + id
      });
      window.open(routeLink.href, "_blank");
    },
    shopdetails(item) {
      if (item.hasOwnProperty("shopId") && item.shopId != "") {
        const routeLink = this.$router.resolve({
          path: "/index/ShopDetails?id=" + item.shopId
        });
        window.open(routeLink.href, "_blank");
      } else {
        this.$message({
          message: "个人车源！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    titleClick(type, newold) {
      switch (newold) {
        //租房
        case 0:
          this.olds = newold;
          this.HousesPage.transactionType = 1;
          delete this.HousesPage.newOld;
          break;
        //新房
        case 1:
          this.olds = newold;
          this.HousesPage.transactionType = 2;
          this.HousesPage.newOld = 1;
          break;
        //二手房
        case 2:
          this.olds = newold;
          this.HousesPage.transactionType = 2;
          this.HousesPage.newOld = 2;
          break;
        case 3:
          break;
      }
      this.HousesPage.pageNo = 1;
      this.getHouseInfo();
    },
    leibieClick(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.leibieIndex = item.valueNum;

        this.getHouseInfo();
        return;
      }
      this.leibieIndex = item;

      this.getHouseInfo();
    },
    priceClick(item) {
      // this.HousesPage.pageNo = 1;
      // if (item != -1) {
      //   this.priceIndex = item.seriesName;
      //   if(!this.arr.includes(this.ppaiData.brandName+"|"+item.seriesName)){
      //     this.arr.push(this.ppaiData.brandName+"|"+item.seriesName)
      //   }else if(this.arr.includes(this.ppaiData.brandName+"|"+item.seriesName)){
      //     var i = this.arr.findIndex((item)=>item==this.ppaiData.brandName+"|"+item.seriesName)
      //     this.arr.splice(i,1)
      //   }
      // } else {
      //   this.priceIndex = item;
      //   if(this.ppaiData&&this.ppaiData.brandName&&!this.arr.includes(this.ppaiData.brandName)){
      //     this.arr.push(this.ppaiData.brandName)
      //   }
      // }
      // this.HousesPage.vehicleBrandModel = this.arr.join(',')
      // 多选
      if (item != -1) {
        if (this.priceIndex != -1) {
          // if(this.priceIndex.includes(item.seriesName)){
          // 	// console.log("1=>>",this.priceIndex)
          // 	// console.log("1=>>",item.seriesName)

          // 	// console.log("1=>>",this.priceIndex.findIndex(item1=>item==item.seriesName))
          // 	this.priceIndex.splice(this.priceIndex.findIndex(item1=>item1==item.seriesName),1)
          // }else{
          // 	this.priceIndex.push(item.seriesName)
          // }
          this.priceIndex = this.dealObjFnc(item.brandId, item, "set");
        } else {
          console.log("set", this.brandIdToVehicleSeriesId);
          this.priceIndex = this.dealObjFnc(item.brandId, item, "set");
          console.log("set", this.brandIdToVehicleSeriesId);
        }
        this.priceIndex.length > 0
          ? (this.HousesPage.vehicleBrandModel = this.priceIndex.join(","))
          : delete this.HousesPage.vehicleBrandModel;
      } else {
        this.priceIndex = -1;

        if (this.brandIdToVehicleSeriesId[this.ppaiData.id]) {
          //

          this.HousesPage.vehicleBrandModel = this.dealObjFnc(
            this.ppaiData.id,
            -1,
            "del"
          ).join(",");
        } else {
          this.HousesPage.vehicleBrandModel = this.dealObjFnc(
            this.ppaiData.id,
            this.ppaiData,
            "set"
          ).join(",");
        }
      }
      this.getHouseInfo();
    },
    dealObjFnc(key, value, type) {
      if (type == "set") {
        // var brandIdToVehicleSeriesId = JSON.parse(
        //   JSON.stringify(this.brandIdToVehicleSeriesId)
        // );
        // console.log(JSON.stringify(this.brandIdToVehicleSeriesId, null, 2));
        if (typeof value != "string") {
          value = JSON.parse(JSON.stringify(value));
          console.log("value.brandName", value);
          if (value.brandName) {
            //如果是品牌
            if (this.brandIdToVehicleSeriesId[key]) {
              //如果当前品牌存在
              if (
                this.brandIdToVehicleSeriesId[key].findIndex(
                  item => item.uuid && item.uuid == value.id
                ) > -1
              ) {
                //如果当前品牌id存在
                return this.dealObjFnc(key, value, "get");
              }
              // 上面判断可无
              return this.dealObjFnc(key, value, "get");
            }

            value.uuid = value.id;
            value.id = "";
            console.log("value.brandName", value);
          } else {
            //不然就是车系
          }
        }
        console.log(
          "22222222222222222",
          this.brandIdToVehicleSeriesId[value.id]
        );
        if (!this.brandIdToVehicleSeriesId[key]) {
          // this.brandIdToVehicleSeriesId = Object.assign(
          //   brandIdToVehicleSeriesId,
          //   {
          //     [key]: [value]
          //   }
          // );
          this.brandIdToVehicleSeriesId[key] = [value];
        } else if (this.brandIdToVehicleSeriesId[key]) {
          console.log("123");
          if (
            this.brandIdToVehicleSeriesId[key].findIndex(
              item => item.id == value.id
            ) == -1
          ) {
            this.brandIdToVehicleSeriesId[key].push({ ...value });
          } else {
            var i = this.brandIdToVehicleSeriesId[key].findIndex(
              item => item.id == value.id
            );
            this.brandIdToVehicleSeriesId[key].splice(i, 1);
          }
        }
        return this.dealObjFnc(key, value, "get");
      }
      if (type == "get") {
        var brandIdToVehicleSeriesId = JSON.parse(
          JSON.stringify(this.brandIdToVehicleSeriesId)
        );
        this.brandIdToVehicleSeriesId = Object.assign(
          {},
          brandIdToVehicleSeriesId
        );
        var arr = [];
        var tempArr;
        var tempStr;
        var flag = false;
        console.log(
          "this.brandIdToVehicleSeriesIdthis.brandIdToVehicleSeriesId",
          this.brandIdToVehicleSeriesId,
          value
        );
        for (const key in this.brandIdToVehicleSeriesId) {
          tempArr = this.brandIdToVehicleSeriesId[key];
          console.log("tempArr", tempArr);
          tempStr = tempArr.filter(item => item.uuid)[0].brandName;
          flag = tempArr.filter(item => !item.uuid).length > 0;

          arr = arr.concat(
            tempArr
              .map(item => {
                if (item.uuid) {
                  return !flag ? item.brandName : "";
                } else {
                  return tempStr + "|" + item.seriesName;
                }
              })
              .filter(item => item)
          );
        }
        console.log("arr", arr);

        // brandIdToVehicleSeriesId[value.id]&&brandIdToVehicleSeriesId[value.id].filter(item=>item.id).length>0
        return arr;
      }
      if (type == "del") {
        //( this.ppaiData.id, -1, "del")
        if (value == -1) {
          //清除这品牌所有车系时
          let brandArr = [];
          let brandArrLen = 0;
          if (Array.isArray(this.brandIdToVehicleSeriesId[key])) {
            brandArr = this.brandIdToVehicleSeriesId[key].filter(
              item => item.uuid
            );
            brandArrLen = brandArr.length;
          }

          this.brandIdToVehicleSeriesId[key] = brandArr;
        } else {
          var index = Array.isArray(this.brandIdToVehicleSeriesId[key])
            ? this.brandIdToVehicleSeriesId[key].findIndex(
              item => item.id == value.id
            )
            : -1;
          if (index > -1) {
            //清除这品牌单个车系时
            this.brandIdToVehicleSeriesId[key].splice(index, 1);
          } else {
            //这品牌增加单个车系时
            this.dealObjFnc(key, value, "set");
          }
        }
        return this.dealObjFnc(key, value, "get");
      }
      if (type == "del1") {
        delete this.brandIdToVehicleSeriesId[key];
        return this.dealObjFnc(key, value, "get");
      }
      if (type == "delAll") {
        //所有
        this.brandIdToVehicleSeriesId = {};
        return [];
      }
    },
    mianjiClick(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.mianjiIndex = item.valueNum;
        this.HousesPage.area = item.valueName;
        this.getHouseInfo();
        return;
      }
      this.mianjiIndex = item;
      delete this.HousesPage.area;
      this.getHouseInfo();
    },
    housesClick(item) {
      this.premisesPage.pageNo = 1;
      if (item != -1) {
        this.housesIndex = item.valueNum;
        this.premisesPage.price = item.valueName;
        this.getHouseInfo();
        return;
      }
      this.housesIndex = item;
      delete this.premisesPage.price;
      this.getHouseInfo();
    },
    areaClick(item) {
      this.agencyPage.pageNo = 1;
      if (item != -1) {
        this.areaIndex = item.valueName;
        this.agencyPage.shopArea = item.valueName;
        this.getHouseInfo();
        return;
      }
      this.areaIndex = item.valueName;
      delete this.agencyPage.shopArea;
      this.getHouseInfo();
    },
    addOrClear(id, flag = true) {
      this.screenList.map(item => {
        if (id) {
          if (id == item.id) {
            item.show = flag;
          }
          // 单选
          // else{
          //   item.show = false
          // }
          //
        } else {
          item.show = false;
        }
      });
    },
    // 项目名称
    typeClick2(item) {
      this.HousesPage.pageNo = 1;
      // if (item != -1) {
      //   this.typeIndex2 = item.valueName;
      //   this.entryName = item.valueName;
      //   this.getHouseInfo();
      //   return;
      // }
      // this.typeIndex2 = item;
      // this.entryName = "";

      if (item != -1) {
        if (this.typeIndex2 != -1) {
          if (!this.typeIndex2.includes(item.valueName)) {
            this.typeIndex2.push(item.valueName);
            // // 单选
            // this.typeIndex2 = [item.valueName];
            // this.addOrClear(item.id);
          } else {
            this.typeIndex2.splice(
              this.typeIndex2.findIndex(item2 => item2 == item.valueName),
              1
            );
          }
        } else {
          this.typeIndex2 = [item.valueName];
          // this.addOrClear(item.id);
        }

        // var arr = this.screenList
        //   .filter(item2 => item2.show)
        //   .map(item2 => item2.value);
        this.typeIndex2.length > 0
          ? (this.entryName = this.typeIndex2.join(","))
          : (this.entryName = "");
      } else {
        this.typeIndex2 = [];
        // this.addOrClear();
        var arr = this.screenList
          .filter(item2 => item2.show)
          .map(item2 => item2.value);
        this.typeIndex2.length > 0
          ? (this.entryName = this.typeIndex2.join(","))
          : (this.entryName = "");

        // this.entryName = "";
      }
      this.getHouseInfo();
    },
    // 店铺类型
    typeClick11(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.typeIndex11 = item.valueNum;
        this.serviceType = item.valueNum;
        this.getHouseInfo();
        return;
      }
      this.typeIndex11 = item;
      this.serviceType = "";
      this.getHouseInfo();
    },

    loucClick(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.loucIndex = item.valueNum;
        this.whetherFreeService = item.valueNum;
        this.getHouseInfo();
        return;
      }
      this.loucIndex = item;
      delete this.whetherFreeService;
      this.getHouseInfo();
    },
    HousesCurrentChange(e) {
      this.HousesPage.pageNo = e;
      this.houseList = [];
      this.getHouseInfo();
    },
    premisesCurrentChange(e) {
      this.premisesPage.pageNo = e;
      this.houseList = [];
      this.getHouseInfo();
    },
    agencyCurrentChange(e) {
      this.agencyPage.pageNo = e;
      this.houseList = [];
      this.getHouseInfo();
    }
  }
};
</script>

<style lang="less" scoped>
.housewrap {
  position: absolute;
  bottom: -32px;
  left: calc((100vw - 1200px) / 2 * (-1));
  width: calc((100vw - 1200px) / 2 + 420px);
}

.housedown {
  width: 572px;
  height: 60px;
  position: absolute;
  z-index: 8;
  // top: 468px;
  right: 80px;
  background-color: #ffffff;
  // box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

.titLiat {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 16px;

  .li {
    display: inline-block;
    vertical-align: top;
    margin-right: 40px;
    color: #333;
    cursor: pointer;

    p {
      font-size: 24px;
    }

    img {
      width: 40px;
      height: 20px;
      margin-left: 50%;
      transform: translateX(-50%);
    }
  }

  .cur {
    color: #64b6a8;
    border: 0;
    transform: scale(1.1);
  }
}

.houseup {
  width: 572px;
  height: 465px;
  position: absolute;
  z-index: 99;
  // top: 469px;
  right: 80px;
  background-color: #ffffff;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

.tit1 {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    padding-top: 32px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    background-color: #f2f2f2;
    white-space: nowrap;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
      cursor: pointer;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
				height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 380px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;

      input {
        width: 300px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }

    .but {
      display: inline-block;
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.saixuan {
  color: #333;
  width: 1200px;
  margin: 0 auto;
  font-size: 0;
  margin-top: 40px;
  padding-bottom: 20px;
  position: relative;

  .li {
    display: flex;

    .custom {
      display: flex;
      align-items: center;

      .custom_title {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        margin-right: 7px;
      }

      .custom_input {
        box-sizing: border-box;
        width: 78px;
        height: 32px;
        background-color: #ffffff;
        border-radius: 4px;
        border: 1px solid #d0d0d0;
        padding: 10px;
      }

      .custom_qd {
        width: 78px;
        height: 32px;
        background-color: #64b6a8;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
        text-align: center;
        line-height: 32px;
        margin-left: 10px;
        cursor: pointer;
      }

      .bq {
        width: 20px;
        height: 32px;
        color: #000;
        font-size: 16px;
        text-align: center;
        line-height: 32px;
      }
    }

    .p1 {
      font-size: 16px;
      font-weight: 600;
      margin-right: 32px;
      width: 70px;
    }

    .p2 {
      font-size: 16px;
      margin-right: 32px;
      cursor: pointer;
      width: 50px;
    }

    .divs {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      font-size: 16px;
      margin-right: 30px;
      margin-bottom: 10px;
    }

    .div-v {
      display: inline-block;
      font-size: 16px;
      padding-right: 14px;
      margin-right: 0;
      vertical-align: top;
      margin-bottom: 10px;
      width: calc(100% / 6);
      overflow: hidden;
      box-sizing: border-box;
      height: 22px;
      line-height: 22px;
    }

    .divjg {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      font-size: 16px;
      cursor: pointer;
      align-items: center;
      margin-right: 30px;
    }

    .list {
      width: 1040px;
      position: relative;

      div {
        cursor: pointer;
      }
    }

    .xuan {
      color: #64b6a8;
    }

    .yiru {
      width: 25px;
      height: 25px;
      border-radius: 25px;
      background-color: #64b6a8;
      text-align: center;
      line-height: 25px;
      color: #fff;
    }

    .ppdiv {
      position: relative;
      display: inline-block;
      font-size: 16px;
      width: 25px;
      height: 25px;
      text-align: center;
      margin-right: 14px;
      vertical-align: top;
      margin-bottom: 10px;

      .brandPop {
        width: 160px;
        height: 200px;
        border: 1px solid red;
        position: absolute;
        right: -170px;
        bottom: -215px;
        background-color: #fff;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        overflow: auto;
        padding-left: 20px;
        padding-top: 10px;

        .brandPop_item {
          display: flex;
          align-items: center;
          color: #000;
          margin-bottom: 10px;

          .brandPop_item_img {
            width: 32px;
            height: 32px;
          }

          .brandPop_item_span {
            margin-left: 10px;
            font-size: 12px;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
  }
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;

  //margin: 60px 0px;
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

.gotop {
  position: fixed;
  width: 85px;
  height: 33px;
  line-height: 34px;
  box-sizing: border-box;
  padding-left: 30px;
  right: 15px;
  bottom: 77px;
  background-color: #fff;
  border-radius: 17px;
  font-size: 12px;
  box-shadow: 0px 0px 36px rgba(0, 0, 0, 0.16);
  color: #000;
  z-index: 9999999;

  img {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 23px;
    height: 23px;
  }
}

/deep/.el-dropdown {
  font-size: 18px;
}

.sortActive {
  color: rgb(100, 182, 168) !important;
}

.brandPop2 {
  box-sizing: border-box;
  width: 1016px;
  // height: 200px;
  border: 1px solid #64b6a8;
  position: relative;
  left: 180px;
  background-color: #fff;
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  // overflow: auto;
  // padding-left: 20px;
  padding: 6px 0 6px 12px;
  margin-bottom: 12px;

  .brandPop_item2 {
    display: flex;
    align-items: center;
    color: #000;
    min-height: 32px;
    margin-right: 24px;
    margin-bottom: 6px;
    cursor: pointer;
    color: #333333;

    &.xuan {
      color: #64b6a8;
    }

    .brandPop_item_img2 {
      width: 32px;
      height: auto;
    }

    .brandPop_item_span2 {
      margin-left: 6px;
      font-size: 14px;
      font-weight: 400;
    }
  }
}

.yixuan {
  box-sizing: border-box;
  padding-top: 15px;
  padding-left: 16px;
  width: 1200px;
  min-height: 60px;
  background-color: #f7f7f7;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 16px;

  .na {
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
  }

  .li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 4px 28px 4px 10px;
    color: #333333;
    color: #64b6a8;
    border: 1px solid #64b6a8;
    margin-right: 12px;

    img {
      position: absolute;
      width: 17px;
      height: 17px;
      top: 7px;
      right: 3px;
      cursor: pointer;
    }
  }

  .qinchu {
    display: inline-block;
    vertical-align: middle;
    width: 86px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #999999;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
  }

  .qinchu,
  .li,
  .na {
    margin-bottom: 12px;
  }
}
</style>
